import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

function render() {}

// 初始化主应用，其实就是渲染主应用
render({ loading: true });

// 定义 loader 函数，切换微应用时由 qiankun 框架负责调用显示一个 loading 状态
const loader = (loading) => render({ loading });

import {
  registerMicroApps, //注册微应用的基础配置信息。当浏览器 url 发生变化时，会自动检查每一个微应用注册的 activeRule 规则，符合规则的应用将会被自动激活。
  start, //启动 qiankun。
  runAfterFirstMounted, //设置主应用启动后默认进入的微应用，其实是规定了第一个微应用挂载完成后决定默认进入哪个微应用
  runDefaultMountEffects, //setDefaultMountApp 作用一致，官网也提到，兼容老版本的一个 api
  setDefaultMountApp, //第一个微应用 mount 后需要调用的方法，比如开启一些监控或者埋点脚本
  loadMicroApp, //手动加载应用
  prefetchApps, //预加载应用
  addErrorHandler, //single-spa提供的添加全局的未捕获异常处理器
  addGlobalUncaughtErrorHandler, // 添加全局的未捕获异常处理器。
  removeErrorHandler, //single-spa提供的移除全局的未捕获异常处理器
  removeGlobalUncaughtErrorHandler, //移除全局的未捕获异常处理器。
  initGlobalState, //定义全局状态，并返回通信方法，建议在主应用使用，微应用通过 props 获取通信方法。
} from "./qiankun";
const apps = [
  {
    name: "vueApp", //应用名
    entry: "//localhost:10000", //默认会加载这个html解析里面的js，动态的执行（子应用必须支持跨域）
    container: "#vue", //将子应用挂载到id=vue的元素上
    loader, // 微应用切换时调用的方法，显示一个 loading 状态
    activeRule: "/vue", //激活规则，访问/vue的时候挂载到id=vue的元素上
  },
  {
    name: "vueApp2", //应用名
    entry: "//localhost:30000", //默认会加载这个html解析里面的js，动态的执行（子应用必须支持跨域）
    container: "#vue2", //将子应用挂载到id=vue的元素上
    loader, // 微应用切换时调用的方法，显示一个 loading 状态
    activeRule: "/vue2", //激活规则，访问/vue的时候挂载到id=vue的元素上
  },
  {
    name: "vueApp3", //应用名
    entry: "//localhost:20000", //默认会加载这个html解析里面的js，动态的执行（子应用必须支持跨域）
    container: "#vue3", //将子应用挂载到id=vue的元素上
    loader, // 微应用切换时调用的方法，显示一个 loading 状态
    activeRule: "/vue3", //激活规则，访问/vue的时候挂载到id=vue的元素上
  },
];
const lifeCycle = {
  beforeLoad: [
    (app) => {
      // 这个打印日志的方法可以学习一下，第三个参数会替换掉第一个参数中的 %c%s，并且第三个参数的颜色由第二个参数决定
      console.log("[LifeCycle] before load %c%s", "color: green;", app.name);
    },
  ],
  beforeMount: [
    (app) => {
      console.log("[LifeCycle] before mount %c%s", "color: green;", app.name);
    },
  ],
  afterUnmount: [
    (app) => {
      console.log("[LifeCycle] after unmount %c%s", "color: green;", app.name);
    },
  ],
};

// 定义全局状态，并返回两个通信方法
const { onGlobalStateChange, setGlobalState } = initGlobalState({
  user: "qiankun",
});

// 监听全局状态的更改，当状态发生改变时执行回调函数
onGlobalStateChange((value, prev) =>
  console.log("[onGlobalStateChange - master]:", value, prev)
);

// 设置新的全局状态，只能设置一级属性，微应用只能修改已存在的一级属性
setGlobalState({
  ignore: "master",
  user: {
    name: "master",
  },
});

// 设置默认进入的子应用，当主应用启动以后默认进入指定微应用
// setDefaultMountApp('/vue2');

// debugger
registerMicroApps(apps, lifeCycle); //注册

// 启动应用
start();

// 当第一个微应用挂载以后，执行回调函数，在这里可以做一些特殊的事情，比如开启一监控或者买点脚本
runAfterFirstMounted(() => {
  console.log("[MainApp] first app mounted");
});

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");
